<template>
  <div class="container">
    <div class="head">
      <div class="main-menucontainer">
        <div class="main-iconbox">
          <img src="../assets/icon/new/globle.svg" alt="" class="main-icon" />
          <img
            src="simulationIcon/ghfs_small.PNG"
            alt=""
            class="main-iconname"
          />
        </div>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="#1479d7"
          text-color="#FFFFFF"
          active-text-color="#CCCCCC"
          :router="true"
          style="border: unset"
          :v-model="menu_txt_cur"
        >
          <el-menu-item route="/about" index="1" style="font-size: 20px">{{
            menu_txt_cur.home
          }}</el-menu-item>
          <el-menu-item route="/models" index="2" style="font-size: 20px">{{
            menu_txt_cur.model
          }}</el-menu-item>
          <el-menu-item route="/data" index="3" style="font-size: 20px">{{
            menu_txt_cur.data
          }}</el-menu-item>
          <el-menu-item route="/simulation" index="4" style="font-size: 20px">{{
            menu_txt_cur.function
          }}</el-menu-item>
          <el-menu-item
            route="/SimulationaResultShower"
            index="5"
            style="font-size: 20px"
            >{{ menu_txt_cur.application }}</el-menu-item
          >
          <el-menu-item
            route="/ResultShower"
            index="6"
            style="font-size: 20px"
            >{{ menu_txt_cur.help }}</el-menu-item
          >
          <el-menu-item route="/about" index="7" style="font-size: 20px">{{
            menu_txt_cur.home
          }}</el-menu-item>
        </el-menu>
      </div>

      <div class="main-user">
        <!-- <i class="fas fa-user-tie"></i> -->
        <router-link to="/userspacemain" class="user-linker">
          <img class="avatar" :src="userAvatar" alt="avatar" />
        </router-link>
        <div class="content">
          <div class="details">
            <h2>
              {{ userInfo.name }}
              <br />
              <span>{{ userInfo.eamil }}</span>
            </h2>
            <div class="data">
              <h3>
                999
                <br />
                <span>模型</span>
              </h3>
              <h3>
                666
                <br />
                <span>数据</span>
              </h3>
              <h3>
                166
                <br />
                <span>参数</span>
              </h3>
            </div>
            <div class="actionBtn">
              <router-link to="/userspacemain">
                <button>个人空间</button>
              </router-link>
              <router-link to="/login">
                <button class="btn-exit">退出登录</button>
              </router-link>
            </div>
          </div>
        </div>
      </div>

      <div class="language">
        <i class="fa-solid fa-language" @click="lanage_transfer"></i>
      </div>
    </div>
    <div class="main">
      <router-view :lanage="lanage" :userInfo="userInfo"></router-view>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import { config } from "../plugins/config.js";
export default {
  data() {
    return {
      userInfo: JSON.parse(localStorage.getItem("user")),
      activeIndex: "",
      ip: config.ip,
      userAvatar: "userImg/admin.jpg",
      lanage: "CN",
      menu_txt_cur: {
        home: "",
        model: "",
        data: "",
        function: "",
        application: "",
        help: "",
        about: "",
      },
      menu_txt: {
        CN: {
          home: "主页",
          model: "模型",
          data: "数据",
          function: "功能",
          application: "应用",
          help: "帮助",
          about: "关于",
        },
        EN: {
          home: "Home",
          model: "Model",
          data: "Data",
          function: "Function",
          application: "Application",
          help: "Help",
          about: "About",
        },
      },
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      // console.log(key, keyPath);
    },
    lanage_transfer() {
      if (this.lanage === "CN") {
        this.lanage = "EN";
        this.menu_txt_cur = this.menu_txt.EN;
      } else {
        this.lanage = "CN";
        this.menu_txt_cur = this.menu_txt.CN;
      }
    },
  },
  mounted() {
    this.menu_txt_cur = this.menu_txt.CN;
    this.userAvatar = config.ip + this.userInfo.avatar;
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.head {
  width: 100%;
  background-color: rgb(20, 121, 215);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.head .el-menu--horizontal .el-menu-item {
  height: 70px;
  line-height: 70px;
}
.head .language {
  position: absolute;
  right: 10px;
  width: 80px;
  cursor: pointer;
  z-index: 16;
}
.head .language i {
  font-size: 30px;
  color: white;
}
.main {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.contact-info {
  width: fit-content;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-right: 12px;
}
.head .main-iconbox {
  display: flex;
  align-items: center;
  margin-left: 40px;
  margin-right: 10px;
}
.head .main-iconbox .main-icon {
  width: 38px;
  height: 38px;
  margin-right: 5px;
}
.head .main-iconbox .main-iconname {
  width: 80px;
  height: 40px;
}
.head .main-menucontainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  width: fit-content;
}
.head .main-user {
  position: absolute;
  top: 35px;
  z-index: 10;
  right: 30px;
  width: 240px;
  height: 10px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;

  border-radius: 6px;
  /* background-color: white; */
  transition: 0.3s;
}
.head .main-user:hover {
  top: 43px;
  right: 30px;
  background-color: white;
  border: 1px solid #dadce0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  height: 180px;
  width: 240px;
}

/* .head .main-user i {
  font-size: 30px;
  color: white;
  font-size: 28px;
} */
.head .main-user .user-linker {
  position: absolute;
  width: 50px;
  height: 50px;

  top: -25px;
  font-size: 20px;
  color: white;
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: 0.3s;
}
.head .main-user .user-linker .avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;

  object-fit: cover;
}
.head .main-user:hover .user-linker {
  width: 66px;
  height: 66px;
  top: -33px;
}
.head .main-user:hover .user-linker .avatar {
  border-radius: 50%;
}
/* .head .main-user .user-linker:hover {
  color: rgb(204, 204, 204);
  text-decoration: underline;
}
.head .main-user .user-avatar:hover {
  cursor: pointer;
} */
.head .main-user .content {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
}
.head .main-user .content .details {
  text-align: center;
  width: 100%;
  transition: 0.3s;
  padding: 16px 20px;
  transform: translateY(200px);
}
.head .main-user:hover .content .details {
  transform: translateY(0px);
}
.head .main-user .content .details h2 {
  font-size: 1.2em;
  font-weight: 600;
  color: #555;
  line-height: 1.2em;
}
.head .main-user .content .details h2 span {
  font-size: 0.75em;
  font-weight: 500;
  opacity: 0.5;
}
.head .main-user .content .details .data {
  display: flex;
  justify-content: space-between;

  margin: 16px 0;
  padding: 0 10px;
}
.head .main-user .content .details .data h3 {
  font-size: 1em;
  color: #555;
  line-height: 1.25em;
  font-weight: 600;
  margin: 0px;
}
.head .main-user .content .details .data h3 span {
  font-size: 0.85em;
  font-weight: 400;
  opacity: 0.5;
}
.head .main-user .content .details .actionBtn {
  display: flex;
  justify-content: space-between;
}
.head .main-user .content .details .actionBtn button {
  padding: 5px 15px;
  border-radius: 5px;
  border: 1px solid #ff5f95;
  outline: none;
  font-size: 0.9em;
  font-weight: 500;
  background: #ff5f95;
  color: white;
  cursor: pointer;
}
.head .main-user .content .details .actionBtn .btn-exit {
  border: 1px solid #999;
  color: #999;
  background: #fff;
}
</style>